<template>
    <el-card>
        <el-row :gutter="5">
            <el-col :md="{span:8}" :sm="{span: 12}">
                <el-input
                        v-model="search.content"
                        placeholder="请输入用户名或者id"
                        class="search-doctor-input"
                >
                    <template #append>
                        <el-button style="width: 100px" @click="LoadPatientDatas(1)">
                            <el-icon>
                                <i class="fas fa-search" />
                            </el-icon>
                            搜索
                        </el-button>
                    </template>
                </el-input>
            </el-col>
            <el-col :md="{span:4}" :sm="{span:4}">
                <el-button type="primary" plain @click="dialog.isShowAddPatient=true">
                    <el-icon>
                        <i class="fas fa-plus" />
                    </el-icon>
                    添加
                </el-button>
            </el-col>
        </el-row>
    </el-card>
    <el-card style="margin-top: 10px">

                <el-table :data="patientDatas" style="width: 100%" @cell-dblclick="cellClick">
                    <el-table-column prop="patientId" label="病患ID" />
                    <el-table-column prop="patientName" label="病患姓名"  />
                    <el-table-column prop="patientIdnum" label="身份证"  />
                    <el-table-column label="性别">
                        <template #default="scope">
                            <el-select v-model="update.patientSex" :model-value="scope.row.patientSex" placeholder="请选择岗位" style="width: 100px" clearable @change="updatePatientSex(scope.row)">
                                <el-option label="请选择" value="" disabled></el-option>
                                <el-option label="男" value="男"></el-option>
                                <el-option label="女" value="女"></el-option>
                            </el-select>
                        </template>
                    </el-table-column>
                    <el-table-column fixed="right" label="操作" width="120">
                        <template #default="scope">
                            <el-button type="danger" @click="deletePatient(scope.row)">
                                <el-icon>
                                    <i class="fas fa-trash-alt" />
                                </el-icon>
                                删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
    </el-card>
    <el-card style="margin-top: 10px">
        <el-pagination style="text-align: center" layout="prev, pager, next" :page-size="pageInation.pageSize" :page-count="pageInation.pageCount" @current-change="LoadPatientDatas" small></el-pagination>
    </el-card>
    <el-dialog
            v-model="dialog.isShowAddPatient"
            title="添加用户"
            width="30%"
            destroy-on-close
            center
    >
        <SystemPopupAddPatient />
    </el-dialog>
</template>

<script>
    import utils from "@/Utils";
    import SystemPopupAddPatient from "@/components/SystemAdmin/Popup/SystemPopupAddPatient";
    export default {
        name: "SystemAdminPatient",
        components:{
            SystemPopupAddPatient
        },
        data(){
            return{
                search:{
                    content:''
                },
                patientDatas:[],
                pageInation:{
                    pageCount:0,
                    pageSize:0,
                },
                loading:true,
                update:{
                    patientSex:''
                },
                dialog:{
                    isShowAddPatient:false
                },
                utils
            }
        },
        methods:{
            LoadPatientDatas:async function (pageIndex) {
                await this.axios.post("/Patient/isLogin/isSystemAndDoctor/getPatientBySearch",{
                    pageIndex:pageIndex,
                    pageSize:10,
                    search:this.search.content
                }).then((req)=>{
                    const data=req.data;
                    if(data.code>0){
                        this.utils.tipsMessage(data.error,data.code);
                        return
                    }
                    const pageData=data.data.pageData;
                    this.pageInation.pageSize=data.data.pageSize;
                    this.pageInation.pageCount=data.data.pageCount;
                    this.patientDatas=pageData;
                    this.loading=false
                })
            },
            cellClick:function (row, column) {
                console.log(row,column)
                console.log(column.property!=="patientName" || column.property!=="patientIdnum")
                if(!(column.property!=="patientName" || column.property!=="patientIdnum")) return;
                console.log(column.property)
                this.$prompt("请确认是否需要修改:"+column.label,"修改内容",{
                    showCancelButton:false,
                    inputValue:row[column.property]
                }).then((val)=>{
                    console.log(val)
                    if (this.utils.isRange(30, 1, val.value)) {
                        this.utils.tipsMessage("真实姓名需要输入2~30位");
                        return;
                    }

                    const patientName=column.property!=='patientName'?'':row.patientName;
                    const patientIdnum=column.property!=='patientIdnum'?'':row.patientIdnum;
                    console.log(patientName)
                    console.log(patientIdnum)
                    this.axios.post("/Patient/isLogin/isSystemAdmin/updatePatientNameOrIdnumOrSex",{
                        patientId:row.patientId,
                        patientName:patientName,
                        patientIdnum:patientIdnum
                    }).then((req)=>{
                        const data=req.data;
                        if(data.code>0){
                            this.utils.tipsMessage(data.error,data.code);
                            return;
                        }
                        this.utils.tipsMessage(data.data,data.code);
                        row[column.property]=val.value;
                    })
                })
            },
            updatePatientSex:function (val){
                this.$confirm("是否需要修改性别为:"+this.update.patientSex, "修改性别", {
                    showCancelButton:false
                }).then(()=>{
                    this.axios.post("/Patient/isLogin/isSystemAdmin/updatePatientNameOrIdnumOrSex",{
                        patientId:val.patientId,
                        patientSex:this.update.patientSex
                    }).then((req)=>{
                        const data=req.data;
                        if(data.code>0){
                            this.utils.tipsMessage(data.error,data.code);
                            return;
                        }
                        this.utils.tipsMessage(data.data,data.code);
                        val.patientSex=this.update.patientSex
                    })
                })

            },
            deletePatient:function (val) {
                this.$confirm("请确认是否需要删除患者:"+val.patientName, "删除患者", {
                    type:'type',
                    showCancelButton:false
                }).then(()=>{
                    this.axios.post("/Patient/isLogin/isSystemAdmin/deletePatientByIdAndIdnum",{
                        patientId:val.patientId,
                        patientIdnum:val.patientIdnum
                    }).then((req)=>{
                        const data=req.data;
                        if(data.code>0){
                            this.utils.tipsMessage(data.error,data.code);
                            return;
                        }
                        this.utils.tipsMessage(data.data,data.code);
                        this.LoadPatientDatas(1);
                    })
                })
            }
        },
        mounted(){
            this.LoadPatientDatas(1);
        }
    }
</script>

<style scoped>
    .search-doctor-input /deep/ .el-input-group__prepend,.search-doctor-input /deep/ .el-input-group__append {
        background-color: #fff;
    }
</style>